import styled from "styled-components";

const Button = styled.button`
  position: relative;

  padding: 1.2rem 4.2rem;
  border: none;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-sm);

  font-size: 2.4rem;
  font-weight: 500;
  color: var(--color-grey-50);
  background-color: var(--color-grey-500);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  &:hover {
    background-color: var(--color-grey-700);
  }

  .icon-container {
    font-size: 2.8rem;
    position: absolute;
    top: 55%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }

  .button-text {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  &:hover .icon-container {
    opacity: 1;
    transform: translateX(265%) translateY(-50%);
  }

  &:hover .button-text {
    opacity: 0;
    transform: translateX(100%);
  }
`;

function IconButton({ icon, text, ...props }) {
  return (
    <Button {...props}>
      <div className="button-text">{text}</div>
      <div className="icon-container">{icon}</div>
    </Button>
  );
}

export default IconButton;
